<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%
    response.setHeader("Cache-Control", "no-store"); //HTTP 1.1    
    response.setHeader("Pragma", "no-cache"); //HTTP 1.0    
    response.setDateHeader("Expires", 0); //prevents caching at the proxy server    
%>
<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 and jQuery Mobile</title>
        <script src="${applicationScope.webApp.root}/js/jquery.min.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.Jcrop.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.mobile.min.js"></script>
        <link rel="stylesheet" href="${applicationScope.webApp.root}/css/jquery.Jcrop.css"/>
        <link rel="stylesheet" href="${applicationScope.webApp.root}/css/jquery.mobile.min.css" /> 
        <script type="text/javascript">
            jQuery(function() {
                jQuery('#cropbox').Jcrop({
                    onSelect:    showCoords,
                    bgColor:     'black',
                    bgOpacity:   .4,
                    setSelect: [${requestScope.cropper.crop.x}, 
                                ${requestScope.cropper.crop.y}, 
                                ${requestScope.cropper.crop.x+requestScope.cropper.crop.width}, 
                                ${requestScope.cropper.crop.y+requestScope.cropper.crop.height}],
                            minSize: [${requestScope.cropper.crop.width}, ${requestScope.cropper.crop.height}],
                            aspectRatio: ${requestScope.cropper.crop.width/requestScope.cropper.crop.height}
                        });
                    });
                    function showCoords(c){
                        //alert($('#x'));
                        //alert($('#x').val());
                        $('#x').val(c.x);
                        $('#y').val(c.y);
                        $('#width').val(c.w);
                        $('#height').val(c.h);
                        //alert("c.x="+c.x+" c.y="+c.y+" c.w="+c.w+" c.h="+c.h);
                    }
        </script>

    </head>
    <body id="body"> 

        <div data-role="page" id="page1"> 
            <div data-role="header">
                <a id='titleLeft' href="${applicationScope.webApp.root}/course" data-role="button" data-theme="a" data-icon="arrow-l">返回</a>
                <h1 id="title">裁剪图片</h1>
                <a id='titleRight' href="#" data-role="button" data-theme="a" data-icon="arrow-r" style="display:none;">菜单</a>
            </div>
            <div data-role="content"> 
                <div class="content-primary">
                    <img id="cropbox" src="${applicationScope.webApp.root}/images/temp/${requestScope.cropper.imageName}" width="${requestScope.cropper.size.width}" height="${requestScope.cropper.size.height}"/>
                    <form id="cropForm" action="${applicationScope.webApp.root}/image?command=crop" method="post">
                        <input type="hidden" name="menuId" value="${requestScope.cropper.menuId}"/>
                        <input type="hidden" name="courseId" value="${requestScope.cropper.courseId}"/>
                        <input type="hidden" name="type" value="${requestScope.cropper.type}"/>
                        <input type="hidden" name="mode" value="${requestScope.cropper.mode}"/>
                        <input type="hidden" name="extension" value="${requestScope.cropper.extension}"/>
                        <input id="x" type="hidden" name="x" value=""/>
                        <input id="y" type="hidden" name="y" value=""/>
                        <input id="width" type="hidden" name="width" value=""/>
                        <input id="height" type="hidden" name="height" value=""/>
                        <div style="text-align: center"><button type="submit" data-theme="a" data-inline="true">裁剪</button></div>
                    </form>
                </div><!--/content-primary --> 
            </div><!-- /content --> 
        </div>
    </body>
</html>